<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Custom Controls for Fabric.js</title>
</head>
<body>
<h1>Custom Controls for fabric.js</h1>
<a href="https://github.com/pixolith/fabricjs-customise-controls-extension">https://github.com/pixolith/fabricjs-customise-controls-extension</a>
<canvas id="example"></canvas>
<ul>
    <li>top left = rotate</li>
    <li>top right = scale</li>
    <li>top middle = rotate by specific degree</li>
    <li>bottom left = remove</li>
    <li>bottom right = move up layer specific</li>
    <li>bottom middle = move down layer specific</li>
    <li>Middle Left is for stretching and if you press SHIFT for skewing</li>
    <li>Middle Right is a custom left (-200px) call and if you press SHIFT for skewing</li>
</ul>
<div class="index">
    <span class="cat"></span>
    <br>
    <span class="bear"></span>
    <br>
    <span class="owl"></span>
</div>
<script defer src="../dependencies/fabric/dist/fabric.js"></script>
<script defer src="../dist/customiseControls.js"></script>
<script defer src="../example/example.js"></script>
</body>
</html>
